<template>
  <div class="feedback">
    <van-nav-bar
      class="nav-bar"
      title="反馈中心"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-dropdown-menu class="dropdown-menu">
      <van-dropdown-item
        v-model="value1"
        :options="option1"
        @change="handleChange"
      />
      <van-dropdown-item disabled v-model="value1" :options="option2" />
    </van-dropdown-menu>
    <van-pull-refresh
      class="pull-refresh"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        :offset="0"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="加载失败，点击重试"
        @load="onLoad"
      >
        <div
          class="feedback-item"
          v-for="item in list"
          :key="item.id"
          @click="handleFeedback(item.id)"
        >
          <span class="item-content">{{ item.content }}</span>
          <span class="item-status">
            <van-tag :type="statusStr(item.status)[0]">{{
              statusStr(item.status)[1]
            }}</van-tag>
          </span>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getFeedbackList } from "@/api/mobile/feedback";
export default {
  data() {
    return {
      value1: 0,
      option1: [
        { text: "全部反馈", value: 0 },
        { text: "审核中", value: 1 },
        { text: "处理中", value: 2 },
        { text: "已完成", value: 3 },
        { text: "已驳回", value: 4 },
      ],
      option2: [
        { text: "共计 - -", value: 0 },
        { text: "共计 - -", value: 1 },
        { text: "共计 - -", value: 2 },
        { text: "共计 - -", value: 3 },
        { text: "共计 - -", value: 4 },
      ],
      list: [],
      loading: false,
      finished: false,
      error: false,
      refreshing: false,
      page: 1,
      pageSize: 20,
      total: 0,
      status: 0,
      isFirst: true,
    };
  },
  methods: {
    // 加载数据
    async onLoad() {
      try {
        // 当下拉刷新时van-pull-refresh会自动将v-model绑定的数据置为true并开始请求，当请求完成后将状态置为false
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }
        const res = await getFeedbackList({
          page: this.page,
          pageSize: this.pageSize,
          status: this.status,
        });
        this.list.push(...res.data.records);
        this.total = res.data.total;
        // 如果是第一次，则将查询的总量进行赋值显示
        if (this.isFirst) {
          this.option2.forEach((item) => {
            if (0 === item.value) {
              item.text = `共计(${this.total})`;
              return;
            }
          });
          this.isFirst = false;
        }
        // 每次获取数据后将当前页数加1
        this.page++;
        // 数据获取完毕关闭加载状态
        this.loading = false;
        // 当数据已获取到最大则停止获取
        if (this.list.length >= this.total) {
          this.finished = true;
        }
      } catch {
        this.error = true;
        this.loading = false;
      }
    },
    // 刷新
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      // 将当前页数置为1
      this.page = 1;
      this.onLoad();
    },
    // 转换状态字符串
    statusStr(status) {
      switch (status) {
        case 1:
          return ["primary", "审核中"];
        case 2:
          return ["warning", "处理中"];
        case 3:
          return ["success", "已完成"];
        case 4:
          return ["danger", "已驳回"];
      }
    },
    // 处理下拉菜单选择
    async handleChange(val) {
      this.list = [];
      this.page = 1;
      this.finished = false;
      this.loading = true;
      this.status = val;
      await this.onLoad();
      this.option2.forEach((item) => {
        if (val === item.value) {
          item.text = `共计(${this.total})`;
          return;
        }
      });
    },
    // 查看反馈详情
    handleFeedback(id) {
      this.$router.push(`/setting/feedbackDetail/${id}`);
    },
  },
};
</script>

<style lang="less" scoped>
.feedback {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  .nav-bar {
    position: fixed;
    z-index: 999;
    width: 100%;
  }
  .dropdown-menu {
    position: fixed;
    z-index: 99;
    margin-top: 46px;
    width: 100%;
    /deep/.van-dropdown-menu__bar {
      .van-dropdown-menu__item--disabled {
        .van-dropdown-menu__title {
          &::after {
            border-color: transparent;
          }
        }
      }
    }
  }
  .pull-refresh {
    margin-top: 94px;
    // 让内容界面撑满这个屏幕，保证刷新的效果更好
    .van-list {
      min-height: calc(100vh - 94px);
    }
    .feedback-item {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      background-color: #fff;
      .item-content {
        width: 70%;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .item-status {
        font-size: 14px;
      }
    }
  }
}
</style>